<template>
  <div class="loginBody">
    <div class="logoImg">
      <img :src="image.logo" alt="">
    </div>

    <div class="bodyMiddle">
      <div>
        <img :src="image.login" alt="">
      </div>
      <div>
        <div class="main-contents">
          <div class="bodyMiddleTitle">账号登录</div>
          <div>
            <el-tabs v-model="loginType" class="demo-tabs">
              <el-tab-pane class="bar-item" label="账号登录" name="userNumber">
                <login-by-password v-if="loginType === 'userNumber'"></login-by-password>
              </el-tab-pane>
              <el-tab-pane class="bar-item" label="手机短信登录" name="phone">
                <login-by-tele-number v-if="loginType === 'phone'"></login-by-tele-number>
              </el-tab-pane>
              <el-tab-pane class="bar-item" label="微信登录" name="manage">
              </el-tab-pane>
            </el-tabs>
          </div>
        </div>

      </div>
    </div>

  </div>
</template>
<script setup>
import router from "../../router/index.js"
import loginByPassword from ".././loginbypassword.vue";
import loginByTeleNumber from ".././loginbytelenumber.vue";
import {image} from "../../assets/index.js";
import {ref} from "vue";


const validateCode = (rule, value, callback) => {
  if (value === '') {
    callback(new Error('请输入验证码'))
  } else if (value.toLowerCase() !== code.value) {
    callback(new Error('验证码错误'))
  } else {
    callback()
  }
}

const code = ref('')//验证码组件传递过来的code

const loginType = ref('userNumber')

const currentComponent = ref(loginByPassword)

const getCode = (codeOfGet) => {
  code.value = codeOfGet.toLowerCase()
}

</script>


<style scoped>
.loginBody {
  width: 100vw;
  height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: #f8f9fa;
  background-size: 100%;
  margin: 0;
  padding: 0;
}

.logoImg {
  position: absolute;
  top: 48px;
  left: 62px;
  cursor: pointer;

  > img {
    width: 80%;
    height: auto;
  }
}

.bodyMiddle {
  display: flex;
  border-radius: 5px;
  overflow: hidden;

  > div:first-child {
    height: 538px;
    overflow: hidden;
    width: 586px;

    > img {
      width: auto;
      height: 538px;
    }
  }

  > div:nth-of-type(2) {
    width: 431px;

    > div:nth-of-type(1) {
      display: flex;
      justify-content: center;
      height: 471px;
      background-color: white;
    }
  }

  .bodyMiddleTitle {
    font-size: 22px;
    font-weight: 700;
    text-align: center;
    margin-top: 20px;
    margin-bottom: 20px;

  }
}

.login-menu {
  border: none;
  height: 42px;

  * {
    height: 41px;
    cursor: pointer;
    position: relative;
    padding-bottom: 9px;
    font-size: 18px;
    font-family: PingFangSC, PingFangSC-Regular, sans-serif;
    font-weight: 400;
    text-align: left;
    color: #74787c;
    line-height: 32px;

  }

}

.main-contents {
  display: block!important;
  padding: 0 35px;
  width: 431px;
  height: fit-content;
}

:deep(.el-tabs__header) {
  margin: 0;
}

:deep(.el-tabs__nav-wrap:after) {
  height: 0;
}

:deep(.el-tabs__nav) {
  width: 100%;
  display: flex;
  justify-content: space-between;
}

:deep(.el-tabs__content) {
  margin-top: -10px;
}
</style>
